<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网购首页</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 导航栏 -->
<header>
    <div class="container">
        <div class="logo">
            <h1>甜呦商品</h1>
        </div>
        <nav>
            <ul>
                <li><a href="index.html" class="active">首页</a></li>
                <li><a href="category.html">分类</a></li>
                <li><a href="cart.html">购物车</a></li>
                <li><a href="about.html">关于我们</a></li>
            </ul>
        </nav>
        <div class="user-actions">
            <a href="login.html" class="btn btn-login">登录</a>
            <a href="register.html" class="btn btn-register">注册</a>
        </div>
    </div>
</header>

<!-- 搜索栏 -->
<div class="search-container">
    <div class="container">
        <div class="search-box">
<!--            <label for="searchInput" class="visually-hidden">搜索商品</label>-->
            <input type="text" id="searchInput" placeholder="搜索商品...">
            <button type="submit">搜索</button>
        </div>
    </div>
</div>

<!-- 商品分类 -->
<section class="categories">
    <div class="container">
        <h2>商品分类</h2>
        <div class="product-card" onclick="location.href='product.html?id=${product.id}'">
            <div class="category-list">

                <div class="category-item">
                    <img src="img/shuMa.png" alt="电子产品">
                    <p>电子产品</p>
                </div>
                <div class="category-item">
                    <img src="img/yiFu.png" alt="服装">
                    <p>服装</p>
                </div>
                <div class="category-item">
                    <img src="img/jiaju.png" alt="家居">
                    <p>家居</p>
                </div>
                <div class="category-item">
                    <img src="img/food.png" alt="食品">
                    <p>食品</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 首页推荐商品 -->
<section class="featured-products">
    <div class="container">
        <h2>推荐商品</h2>
        <div class="product-slider">
            <div class="product-card">
                <img src="img/A1.png" alt="商品1">
                <h3>小熊艺术水杯</h3>
                <p class="price">¥250.00</p>
                <button class="btn-add-to-cart">加入购物车</button>
            </div>
            <div class="product-card">
                <img src="img/A2.png" alt="商品2">
                <h3>清新茶杯</h3>
                <p class="price">¥29.00</p>
                <button class="btn-add-to-cart">加入购物车</button>
            </div>
            <div class="product-card">
                <img src="img/A3.png" alt="益智积木">
                <h3>益智积木</h3>
                <p class="price">¥10.00</p>
                <button class="btn-add-to-cart">加入购物车</button>
            </div>
        </div>
        <div class="pagination">
            <a href="#" class="active">1</a>
            <a href="#" class="active2">2</a>
            <a href="#" class="active3">3</a>
            <a href="#">下一页</a>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer>
    <div class="container">
        <p>&copy; 2025 甜呦商城 版权所有</p>
    </div>
</footer>

<script src="js/main.js"></script>
</body>
</html>